<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>

    <style>
        .file-box {
            position: relative;
            display: inline-block;
            width: 500px;
            height: 500px;
        }

        .file-box img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            position: absolute;
            top: -30px;
            left: 0;
            display: inline-block;
            border: none;
        }

        .file-box .txt,
        .file-box .file {
            width: 170px;
            height: 36px;
            position: absolute;
            top: -20px;
            left: 100px;
            text-align: center;
        }

        .box-main {
            width: 1000px;
            height: 500px;
            display: flex
        }

        .box-main>input {
            margin: 20px;
        }

        .box-main>button {
            margin: 20px;
            background-color: aquamarine;
        }

        .box-main>img {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="box-main">
        <input type="file" name="file" id="input_file" onchange="imgPreview(this)">

        <button onclick="encrypt()" style="height: 50px;width: 200px;">加密</button>


        <button style="width: 80px;height: 30px;" onclick="upload()" value="上传">上传</button>

    </div>
    <input id="res" style="width: 180px;height: 400px;background-color: rgb(174, 218, 15); " value="加密结果" />
</body>

<script>
    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];

        //读取完成
        reader.onload = function (e) {
            var data = reader.result;
            var array = new Int8Array(data);
            $('#res').val(JSON.stringify(array, null, '  '))
            // window.setTimeout(ReadFile, 1000);
        };
        reader.readAsArrayBuffer(file);
    }

    //公钥
    var PUBLIC_KEY =
        `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8HMr2CBpoZPm3t9tCVlrKtTmI4jNJc7/HhxjIEiDjC8czP4PV+44LjXvLYcSV0fwi6nE4LH2c5PBPEnPfqp0g8TZeX+bYGvd70cXee9d8wHgBqi4k0J0X33c0ZnW7JruftPyvJo9OelYSofBXQTcwI+3uIl/YvrgQRv6A5mW01QIDAQAB`;
    //私钥
    var PRIVATE_KEY =
        'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBALwcyvYIGmhk+be320JWWsq1OYjiM0lzv8eHGMgSIOMLxzM/g9X7jguNe8thxJXR/CLqcTgsfZzk8E8Sc9+qnSDxNl5f5tga93vRxd5713zAeAGqLiTQnRffdzRmdbsmu5+0/K8mj056VhKh8FdBNzAj7e4iX9i+uBBG/oDmZbTVAgMBAAECgYEAmgNU5NTDkj9B+Pnt6UU8doSjw3+3j+bV2K2yS3QUOvAUus/Ax7x6ktjWxzCXvDY9IfUil2RNv9vtKEAqYLCWjc+lf8PV/yH1b7NEgyeAPBXtAJRoOnmYL2bdPW92kP9KgxJruF6Dz/C5AmMOncsvq8ABD+9Darn4p8dwj2ZC4O0CQQDf/AHmZsQokEItfCy4mHS9UbxbfIhEUv1ApPh/+Sr7NkJkHWYCtBQo+8jKO6zurAZQgWBPD1XX2UE4R+VIiZazAkEA1wAqtMvGhccyRZr+6kpkpDIa8+9jOE+nGUzqTDvgCID6as8AzOONFVVK6m/UUqkhcJ8Qu1pF36BGojy5BX2KVwJBAJSFpbji0hXXupowqfLp3RcgmNbNWAp+QUJZYhJx5cdYbmO2fssyH+AhPT6knYJR/YnqkDM8hv6vKCkqu2YDHjMCQAOA8TE5EOclM+CGghj3VWSHnIDVKdzFD4gOBNNxNlltIKeU8AJmwunSFgJ0CBXAw9a+ANvMwM7AIeaK7sj0HskCQAvxfDCq7gaNx+pfu0FHG8Gix08A/A6foggBl1fVu+L9sr9ZuOQ3HbXnl28F9ewuB9xdjnLUDjp7W7U0pB+vKoQ=';

    //使用公钥加密 
    var fnencrypt = (str) => {
        let encryptor = new JSEncrypt(); // JSEncrypt对象
        encryptor.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
        let rsaPassWord = encryptor.encrypt(str); // 密码进行加密
        return rsaPassWord;
    };


    $(function () {

    })

    function encrypt(params) {
        console.log(fnencrypt("dddddddddddd"))
        $('#res').val(fnencrypt("dddddddddddd"))
    }
</script>

</html>